import { ChangeEvent } from "react";

interface CheckboxProps {
  checked?: boolean;
  defaultChecked?: boolean;
  onChange?: (e: ChangeEvent<HTMLInputElement>) => void;
  onFocus?: () => void;
  onBlur?: () => void;
}

export default function Checkbox(props: CheckboxProps) {
  const { checked, defaultChecked, onChange, onFocus, onBlur } = props;
  return (
    <>
      {"checked" in props ? (
        <input
          type="checkbox"
          checked={checked}
          onChange={onChange}
          onFocus={onFocus}
          onBlur={onBlur}
        />
      ) : defaultChecked ? (
        <input
          type="checkbox"
          defaultChecked={defaultChecked}
          onChange={onChange}
          onFocus={onFocus}
          onBlur={onBlur}
        />
      ) : (
        <input
          type="checkbox"
          onChange={onChange}
          onFocus={onFocus}
          onBlur={onBlur}
        />
      )}
    </>
  );
}
